<template>
	<view class="message">
		<view class="cityList">
			<view class="box" v-if="localCounty && localCounty.name">
                <view class="title">当前地区</view>
                <view class="city">
                    <view class="item add" style="background-color: #f5f5f5;" @click="change({})">
                        <text class="u-line-1" style="margin-right:12rpx">{{ localCounty.name }}</text>
						<uv-icon name="close" color="#999" size="17"></uv-icon>
                    </view>
                </view>
            </view>
            <view class="box">
                <view class="title">选择地区</view>
                <view class="city">
                    <view class="item u-line-1" v-for="(item , index) in countysData" :key="index" @click="change(item)">{{ item.name }}</view>
                </view>
            </view>
		</view>
	</view>
</template>
<script>
    import { countys } from "@/api/baseData";
    export default {
        components: {},
        props:{
            citycode:{
                type:String,
                default:''
            }
        },
        data() {
            return {
                countysData:[],
                localCounty:{}
            }
        },
        created(){
            this.localCounty = uni.getStorageSync('county')
            countys({citycode:this.citycode}).then(res => {
                this.countysData = res.data
            })
        },
        methods:{
            change(item){
                uni.setStorageSync('county',item)
                this.$emit('change',item)
            }
        }
    }
</script>
<style>
    .message .uv-index-list__letter{
        top:144upx !important;
    }
</style>
<style scoped lang="scss">
	.message {
		.cityList {
			.box {
				margin: 40rpx 0 30rpx 30rpx;

				.title {
					font-size: 26rpx;
					color: #A6ABB7;
				}

				.city {
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-top: 24rpx;
						margin-right: 2%;
						text-align: center;
						width: 27%;
						height: 80rpx;
						line-height: 80rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1rpx solid #E5E5E5;
						font-size: 30rpx;
						padding: 0 10rpx;
					}

					.add {
						display: flex;
						align-items: center;
						justify-content: center;

						uni-image {
							margin-right: 8rpx;
							width: 28rpx;
							height: 28rpx;
						}

						uni-text {
							max-width: 145rpx;
						}
					}
				}
			}

			.list-cell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				padding: 10px 24rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 24px;
				background-color: #fff;
			}

			.anchor-text {
				color: red;
			}
		}
	}
</style>